@import 'common.sass'

.contact-container
    width: vw(750)
    height: vw(695)
    background-color: rgb(70, 75, 77)
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    color: $content_color

    .name
        width: vw(600)
        height: vw(68)
        border-radius: vw(10)
        background-color: white
        display: flex
        justify-content: flex-start
        align-items: center

        .icon-box
            width: vw(108)
            height: vw(68)
            display: flex
            justify-content: center
            align-items: center

            .icon
                width: vw(35)
                height: vw(48)
                background-image: url("images/index/name.png")

        .vr
            width: vw(2)
            height: vw(36)
            background-color: rgb(153, 153, 153)

        .input-box
            width: vw(490)
            height: vw(68)
            display: flex
            align-items: center

            .input
                width: vw(480)
                height: vw(68)
                font-size: vw(24)
                text-indent: 1em
                border: none
                outline: none

    .phone
        width: vw(600)
        height: vw(68)
        border-radius: vw(10)
        background-color: white
        display: flex
        justify-content: flex-start
        align-items: center

        .icon-box
            width: vw(108)
            height: vw(68)
            display: flex
            justify-content: center
            align-items: center

            .icon
                width: vw(45)
                height: vw(48)
                background-image: url("images/index/phone.png")

        .vr
            width: vw(2)
            height: vw(36)
            background-color: rgb(153, 153, 153)

        .input-box
            width: vw(490)
            height: vw(68)
            display: flex
            align-items: center

            .input
                width: vw(480)
                height: vw(68)
                font-size: vw(24)
                text-indent: 1em
                border: none
                outline: none

    .type-and-sexuality
        width: vw(600)
        height: vw(68)
        display: flex

        .type
            width: vw(300)
            height: vw(68)
            border-radius: vw(10)
            background-color: white

            .select
                width: vw(300)
                height: vw(68)
                border-radius: vw(10)
                color: $content_color
                border: 0
                padding-left: vw(30)
                appearance: none
                -moz-appearance: none
                -webkit-appearance: none
                background: url('images/index/down.png') vw(250) center no-repeat
                background-size: vw(20)

        .sexuality
            width: vw(300)
            height: vw(68)
            display: flex
            justify-content: flex-start
            align-items: center
            color: white

            .h-blank-50
                width: vw(50)
                height: vw(68)

            .h-blank-20
                width: vw(20)
                height: vw(68)

            .default
                width: vw(32)
                height: vw(32)
                border-radius: vw(32)
                background-color: rgba(255, 255, 255, 0.5)
                display: flex
                justify-content: center
                align-items: center
                .child
                    width: vw(20)
                    height: vw(20)
                    border-radius: vw(20)
                    background-color: white

            .checked
                @extend .default
                background-color: rgba(30, 155, 177, 0.5)
                .child
                    background-color: $brand_main_color

            .label
                width: auto
                height: vw(68)
                display: flex
                align-items: center

    .description-box
        width: vw(600)
        height: vw(250)
        border-radius: vw(10)
        background-color: white
        display: flex
        justify-content: center
        align-items: center
        font-size: vw(24)

        .input
            width: vw(540)
            height: vw(190)
            line-height: vw(42)
            font-size: vw(24)
            text-indent: 1em
            border: none
            outline: none

    .hint
        width: auto
        height: auto
        font-size: vw(22)
        color: rgba(255, 255, 255, 0.5)

    .button-box
        width: auto
        height: vw(58)

        .button
            width: vw(200)
            height: vw(58)
            background-color: rgb(30, 155, 177)
            border-radius: vw(10)
            font-size: vw(28)
            display: flex
            justify-content: center
            align-items: center
            color: white